<template>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <!--页头-->
    <view class="pages-index">
      <view class="infotop">
        <!--返回-->
        <view class="uni-page-head-btn">
          <i
            @tap="navigateBack"
            class="uni-btn-icon"
            style="color: rgb(255, 255, 255); font-size: 27px"
            ></i
          >
          <view class="header-title">
            <text>物资设备验收管理平台</text>
          </view>
          <view class="header-title" @tap="quit">退出</view>
        </view>
        <view class="index-card">
          <view class="titlecontent">
            <view class="welcome-txt">
              <text style="font-size: 38rpx">欢迎!</text>
              <text v-if="userInfo">{{ userInfo.strName }}</text>
              <text>进入</text>
            </view>
            <view class="welcome-txt">
              <text>物资设备现场验收</text>
            </view>
            <view class="welcome-txt">
              <text>{{ date }}</text>
            </view>
          </view>
          <image class="info-image" src="/static/images/dashboard-info.svg" />
        </view>
      </view>
      <!--内容区域-->

      <view class="menu-card" v-for="(item, index) in menu" :key="index">
        <view class="menu-title">
          <view class="tags"></view>
          <text>{{ item.name }}</text>
        </view>
        <view class="menu-content">
          <view class="menu-item">
            <view
              v-for="(subItem, subIndex) in item.submenu"
              :key="subIndex"
              class="sub-item"
            >
              <navigator :open-type="subItem.isTab" :url="subItem.url">
                <view
                  class="menu-icon"
                  :style="{
                    background: subItem.color,
                  }"
                >
                  <text class="iconfont" :class="subItem.icon"></text>
                </view>
                <text>{{ subItem.title }}</text>
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      userInfo: {
        strName: "Track",
      },
      params: {
        pageNo: 1,
        size: 10,
      },
      menu: [
        
      ],
    };
  },
  computed: {
    date: () => {
      moment.locale("zh-cn");
      return moment().format("YYYY[年]M[月]D[日] dddd");
    },
  },
  methods: {
    // ...mapActions(["getTODOwork"]),
    navigateBack() {
      uni.navigateBack();
    },
    quit() {
      uni.showModal({
        title: "退出",
        content: "确认退出工作台？",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorage();
            uni.reLaunch({
              url: "/pages/login/login",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
  onShow() {
    // this.getTODOwork(this.params);
  },
};
</script>

<style lang="scss" scoped>
.pages-index {
  padding-bottom: 60rpx;
  background: #f5f5f9;
}
.status_bar {
  background-color: #4481fe;
  height: var(--status-bar-height);
  width: 100%;
}
.waitare {
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 14rpx;
  padding-bottom: 30rpx;
  .waittitle {
    display: flex;
    .tags {
      margin-top: 28rpx;
      margin-right: 10rpx;
      margin-left: 22rpx;
      background: #039be5;
      width: 8rpx;
      height: 32rpx;
      border-radius: 4rpx;
    }
  }
  .workcontent {
    min-height: 300rpx;
  }
}

.infotop {
  background-color: #4481fe;
  .header-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #ffffff;
  }
  .uni-page-head-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 20rpx;
    box-sizing: border-box;
    color: #fff;
  }
  .index-card {
    display: flex;
    justify-content: center;
    align-items: center;
    .info-image {
      width: 320rpx;
      height: 380rpx;
    }
    .titlecontent {
      color: #ffffff;
      font-size: 30rpx;
      line-height: 68rpx;
      margin-right: 48rpx;
      .welcome-txt {
        font-size: 30rpx;
        line-height: 68rpx;
      }
      .welecome-date {
        margin-right: 20px;
        float: right;
        font-family: "Times New Roman", Times, serif;
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}
.menu-card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 14rpx;
  .menu-title {
    color: #303133;
    font-weight: 600;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    .tags {
      margin-right: 10rpx;
      background: #4481fe;
      width: 8rpx;
      height: 32rpx;
      border-radius: 4rpx;
    }
  }
  .menu-content {
    margin-top: 20rpx;
    .menu-item {
      font-weight: 500;
      display: flex;
      flex-wrap: wrap;
      color: #000000;
      font-size: 28rpx;
      .sub-item {
        text-align: center;
        width: 33%;
        padding: 18rpx 0;
        image {
          width: 88rpx;
          height: 88rpx;
        }
        .menu-icon {
          width: 88rpx;
          height: 88rpx;
          background: #000000;
          border-radius: 50%;
          font-size: 32rpx;
          line-height: 88rpx;
          color: #fff;
          margin: 0 auto 24rpx;
          .iconfont {
            font-size: 48rpx;
          }
        }
        text {
          display: block;
        }
      }
    }
  }
}
</style>
